<template>
        <rx-layout>
            <div slot="center">

                <div class="table-operator" style="padding-left: 10px !important; padding-bottom: 10px">
                    <a-button type="primary" @click="addRule">{{$ti18('rxList.newBtn','新增')}}</a-button>
                    <a-button type="danger" @click="emptyRule">{{$ti18('rxList.resetBtn','清空')}}</a-button>
                </div>
                <a-form :form="form">
                    <a-table
                            :columns="columns"
                            :dataSource="parmaData"
                            :pagination="false"
                            :bordered="true"
                            :rowKey="row => row.index"
                    >
                        <template slot="paramType" slot-scope="text, record,index">
                            <a-checkbox v-model="text" @change="e => handleChange(e,index)">
                                {{i18n("form.preDef","预定义")}}
                            </a-checkbox>
                        </template>

                        <template slot="paramKey" slot-scope="text, record,index">
                            <a-input :placeholder="i18n('outside.paramkeyTip','请填写参数标识')" v-model="text" @change="e => inputParamsChange(e,index)"/>
                        </template>

                        <template slot="paramKeyVal" slot-scope="text, record,index">
                            <a-input :placeholder="i18n('outside.paramval','请填写参数值')" v-model="text" v-if="record.paramType==false"
                                     @change="e => inputChange(e,index)"/>

                            <a-select v-else-if="record.paramType==true"
                                      :placeholder="i18n('outside.paramval','请选择参数值')"
                                      style="margin: -5px 0"
                                      v-model="text"
                                      :getPopupContainer="p=>p.parentNode"
                                      optionLabelProp="label"
                                      @change="e => inputChange(e,index)"
                            >
                                <a-select-option value="notSelect" class="selectHeader" disabled>
                                    <span class="left">
                                        {{i18n('form.name','名称')}}
                                    </span>
                                    <span class="right">
                                        {{i18n('outside.value','值')}}
                                    </span>
                                </a-select-option>
                                <a-select-option :label="item.name" :value="item.key" class="selectHeader"
                                                 v-for="(item) in headerOpions" :key="item.key">
                                    <span class="left">{{ item.name }}</span><span class="right">{{ item.key }}</span>
                                </a-select-option>
                            </a-select>
                        </template>
                        <template slot="action" slot-scope="text,record,index">
                            <a-icon type="delete" style="color: #ff4d4f" @click="remove(index)" title="删除"/>

                            <a-icon @click="upVarRow(record,index)" style="cursor: pointer" title="向上" type="up"/>
                            <a-icon @click="downVarRow(record,index)" style="cursor: pointer" title="向下"
                                    type="down"/>
                        </template>
                    </a-table>
                </a-form>
            </div>
        </rx-layout>
</template>
<script>
    import {BaseForm, RxDialog, RxLayout, Util} from "@lowcode/jpaas-common-lib";
    import {swapArrItems} from '@/utils/util';

    export default {
        name: 'out-side-url-form-params-edit',
        mixins: [BaseForm],
        props: {
            layerid: String,
            lydata: Object,
            destroy: Function,
            urlParamData: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                headerOpions: [
                    {name: this.i18n('outside.userId','当前登录人ID'),key:"userId"},
                    {name: this.i18n('outside.account','当前登录人账号'),key:"account"},
                    {name: this.i18n('outside.fullName','当前登录人姓名'),key:"fullName"},
                    {name: this.i18n('outside.bpmDesign','流程设计'),key:"defId"},
                    {name: this.i18n('outside.bpmInstance','流程实例'),key:"instId"},
                    {name: this.i18n('outside.taskId','任务主键'),key:"taskId"},
                    {name: this.i18n('outside.nodeId','流程节点'),key:"nodeId"},
                    {name: this.i18n('outside.nodeName','流程节点名称'),key:"nodeName"},
                    {name: this.i18n('outside.stageType','阶段类型'),key:"stageType"},
                ],
                columns: [
                    {
                        title: this.i18n('outside.paramType','参数类型'),
                        dataIndex: 'paramType',
                        width: '20%',
                        scopedSlots: {customRender: 'paramType'}
                    },
                    {
                        title: this.i18n('outside.paramKey','参数key'),
                        dataIndex: 'paramKey',
                        width: '35%',
                        scopedSlots: {customRender: 'paramKey'}
                    },
                    {
                        title: this.i18n('outside.value','值'),
                        dataIndex: 'paramKeyVal',
                        width: '35%',
                        scopedSlots: {customRender: 'paramKeyVal'}
                    },
                    {
                        title: this.$ti18('rxList.action','操作'),
                        dataIndex: 'action',
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                parmaData: [],
                idx_: 0
            }
        },
        components: {
            RxDialog, RxLayout, Util
        },
        created() {
            this.initValue();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formPc",key);
            },
            valid(){
                if (this.parmaData && this.parmaData.length > 0) {
                    for (var i = 0; i < this.parmaData.length; i++) {
                        var data = this.parmaData[i];
                        if("pk"==data.paramKey || "authorization"==data.paramKey){
                            this.$message.error("【pk】为主键默认占用字段，请修改其他字段！");
                            return {success:false,msg:"【pk】、【authorization】分别为表单主键、用户登录token默认占用字段，请修改其他字段！"}
                        }
                    }
                }
                return {success:true,msg:"校验成功"}
            },
            inputParamsChange(val, index) {
                var oldData = this.parmaData[index];
                if("pk"==val.target.value){
                    this.$message.error("【pk】为主键默认占用字段，请修改其他字段！");
                }
                if("authorization"==val.target.value){
                    this.$message.error("【authorization】为用户登录token默认占用字段，请修改其他字段！");
                }
                oldData.paramKey = val.target.value;
            },
            inputChange(val, index) {
                var oldData = this.parmaData[index];
                if (oldData.paramType) {
                    oldData.paramKeyVal = val;
                    if(!oldData.paramKey){
                        oldData.paramKey=val;
                    }
                } else {
                    oldData.paramKeyVal = val.target.value;
                }
            },
            handleChange(val, index) {
                var oldData = this.parmaData[index];
                oldData.paramType = val.target.checked;
                if (oldData.paramType) {
                    oldData.paramKeyVal =  this.getOneOption();
                } else {
                    oldData.paramKeyVal = "";
                }
            },
            getOneOption(){
                if(this.headerOpions.length>0){
                    return this.headerOpions[0].key;
                }
                return "";
            },
            initValue() {
                if (this.urlParamData && this.urlParamData.length > 0) {
                    for (var i = 0; i < this.urlParamData.length; i++) {
                        var data = this.urlParamData[i];
                        this.parmaData.push(data)
                    }
                }
            },
            addRule() {
                this.parmaData.push({
                    paramType: true,
                    paramKey: '',
                    paramKeyVal: '',
                })
            },
            emptyRule(){
                this.parmaData=[];
            },
            remove(index) {
                this.parmaData.splice(index, 1);
            },
            upVarRow(record, index) {
                swapArrItems(this.parmaData, index, index - 1);
            },
            downVarRow(record, index) {
                swapArrItems(this.parmaData, index, index + 1);
            },
            okFun() {
                Util.closeWindow(this, "ok", this.getData());
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            },
            getData() {
                return this.parmaData;
            },
        },
        watch: {
            urlParamData: {
                handler(val) {
                    this.initValue();
                },
                deep: true
            }
        }
    }
</script>
<style>
    .selectHeader > span {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
    }

    .selectHeader > span.left {
        padding-right: 10px;
    }
    .subjectClass{
        display: inline-block;vertical-align: middle;
        padding:4px 10px;
        background: #eaeaea;
        max-width:500px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>